---
id: solutions-ecommerce
slug: /search-ui/solutions/ecommerce
title: "Overview"
description: Build an ecommerce experience with Search UI
date: 2022-04-13
tags: ["ecommerce solution", "ecommerce search ui", "overview"]
---

In ecommerce, to build great search experiences for your customers, you need to focus on these major experiences:

- **Global Search bar**: to give customers the ability to perform a search on any page of your store.
- **Search Page**: to give your customers a place to see results relevant to their query and refine them using facets.
- **Category Page**: to show a list of products from a particular category to help users explore available products.
- **Product Carousel**: to show a list of products within pages like the Homepage or Checkout, or if a query returns no results.
- **Product Detail Page**: to describe the product and provide cross-sell recommendations, like similar products from the same category or "frequently bought with" items.

Below you can see a demo of an ecommerce store built with Search UI. We're going to use it to demonstrate different concepts in the next several articles.

Full code of this demo is available here: https://github.com/elastic/search-ui/tree/master/examples/sandbox, with the Ecommerce code located under `pages/ecommerce`.

<iframe
  src="https://codesandbox.io/embed/github/elastic/search-ui/tree/master/examples/sandbox?autoresize=1&fontsize=12&initialpath=%2Fecommerce&module=%2Fsrc%2Fpages%2Fecommerce%2Findex.js&theme=light&view=preview&hidedevtools=1"
  style={{
    width: "100%",
    height: "800px",
    overflow: "hidden"
  }}
  title="Search UI"
  allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>

<DocRelatedArticles
  sectionTitle="Related Articles"
  items={[
    {
      pageId: "solutions-ecommerce-autocomplete"
    },
    {
      pageId: "solutions-ecommerce-search-page"
    },
    {
      pageId: "solutions-ecommerce-category-page"
    }
  ]}
/>
